<template>
	<view style="background-color: #EFEFEF;">
		<uni-nav-bar :border="false" :fixed="true" :statusBar="true" @clickLeft="openLeftSearch()" @clickRight="openMainSetting()"
		 backgroundColor="#EFEFEF">
			<view class="flex align-center justify-center font-weight-bold w-100">
				<view class="mx-1" @click="changeTab(index)" v-for="(item,index) in tabBars" :key="index" :class="tabIndex === index ? 'font-lg text-black' : 'font-md text-light-muted'">
					{{item.name}}
				</view>
			</view>
			<text slot="left" class="iconfont iconsousuo ml-2" style="font-size: 48rpx;"></text>
			<text slot="right" class="iconfont iconshaixuan" style="font-size: 48rpx;"></text>
		</uni-nav-bar>
		<!-- #ifndef MP-ALIPAY -->
		<swiper class="card-swiper" :indicator-dots="false" :circular="true" :autoplay="false" interval="5000" duration="500"
		 @change="cardSwiper" :style="'height:'+swiperH+'px;'">
			<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
				<view class="swiper-item" @click.stop="openLawyerPage(item)">
					<image :src="item.avatar" mode="aspectFill" :style="'height:'+imageH+'px;'"></image>
					<view class="flex flex-column flex-1 align-center">
						<view class="flex align-center mt-2">
							<text class="font-md text-black font-weight-bold mr-2">{{item.user_nicename}}</text>
						</view>
						<view class="flex align-center">
							<text class="font text-warning font-weight-bold mr-2">4.95</text>
							<!-- 禁用状态 -->
							<!-- <uni-rate :size="16" :disabled="true" disabledColor="#ffc107" :value="4.5" /> -->
							<sunui-star :defaultStar="3.5" :disabledStar="true" class="sunui-star" />
						</view>
						<view class="flex flex-wrap">
							<view class="border rounded32 text-lightbule font-sm mx-2 my-1 px-2" v-for="(item2,index2) in setlist" :key="index2">{{item2.name}}</view>
						</view>
						<text class="font-sm text-dark mt-1">{{item.area_address}}·{{item.area_address1}}</text>
						<button type="primary" class="iconfont iconyinshipintonghua-baise mini-button" style="font-size: 48rpx;"
						 @click.stop="showModalDialog(item)"></button>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- #endif -->
		<!-- 弹窗示例 -->
		<zpopup v-model="popupShow" @change="popupChange">
			<uni-popup-customer :localDic="localDic" :expertlist="expertlist" @showpopup="popupChange"></uni-popup-customer>
		</zpopup>
		<modal-dialog v-if="modalShow" :targetUser="tarUserInfo" :screenWidth="screenWidth"
		 @closeModal="closeModalAction"></modal-dialog>
	</view>
</template>

<script>
	const jyJPush = uni.requireNativePlugin('JY-JPush');
	const dialog = uni.requireNativePlugin("CL-Dialog")
	import store from '@/store/index.js';
	import peopleTags from '@/common/people-tags.js'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import sunuiStar from '@/components/sunui-star/sunui-star.vue';
	import zpopup from '@/components/common/zpopup.vue';
	import uniPopupCustomer from '@/components/uni-popup-customer/uni-popup-customer.vue';
	import zLoading from "@/components/common/loading.vue"
	import modalDialog from '@/components/modal/modal-dialog.vue';
	export default {
		components: {
			uniNavBar,
			sunuiStar,
			zpopup,
			uniPopupCustomer,
			modalDialog
		},
		data() {
			return {
				last_id: '',
				reload: false,
				popupShow: false,
				cardCur: 0,
				imageW: 360,
				swiperH: 1080,
				imageH: 720,
				tabIndex: 0,
				tabBars: [{
					name: "推荐"
				}, {
					name: "匹配"
				}],
				setlist: [{
					name: "情感纠纷"
				}, {
					name: "经济合同"
				}, {
					name: "情感纠纷"
				}],
				currentPage: 0,
				loadmore: false,
				swiperList: [],
				towerStart: 0,
				direction: '',
				type: 'top',
				msgType: 'success',
				localDic: {
					areaCode: "310000",
					area_name: "上海"
				},
				expertlist: peopleTags.expertlist,
				userid: 0,
				curUserInfo: {},
				tarUserInfo: {},
				screenWidth: 640,
				modalShow: false
			};
		},
		onReady() {
			// 页面打开自动打开对话框
			setTimeout(() => {
				this.msgType = 'success'
			}, 500)
		},
		onLoad() {
			uni.showModal({
				title: '温馨提示',
				content: '感谢您信任并使用随律APP。\n\n我们深知个人隐私的重要性，在您使用我们的产品和服务时所提供的个人信息将只用于本《隐私政策》中规定的用途。\n\n为了您更好的使用本APP，请您在使用前仔细阅读并确认您已经充分理解本《隐私政策》、《用户协议》。',
				success: function(res) {
					if (res.confirm) {
						console.log('同意');
					} else if (res.cancel) {
						console.log('不同意');
					}
				}

			});
			uni.getSystemInfo({
				success: res => {
					this.swiperH = res.windowHeight - uni.upx2px(180);
					this.imageW = res.windowWidth + uni.upx2px(120);
					this.imageH = res.windowHeight - uni.upx2px(720);
					this.screenWidth = res.windowWidth * 0.8;
				},
			});
			// this.TowerSwiper('swiperList');
			// 初始化towerSwiper 传已有的数组名即可
			uni.$on('addressSelect', (res) => {
				this.localDic = res.localDic
			});
			jyJPush.getRegistrationID(
				//  返回的数据会有registrationID，errorCode
				result => {
					console.log("registrationID:" + JSON.stringify(result));
					uni.setStorage({
						key: 'registrationID',
						data: result['registrationID']
					});
				});
			uni.getStorage({
				key: "user-info",
				success: (res) => {
					if (res.data) {
						let result = JSON.parse(res.data);
						this.curUserInfo = result;
						this.userid = result['id'];
					}
				},
				fail: (error) => {

				},
				complete: () => {
					this.getHomeList();
				}
			})

		},
		onPullDownRefresh() {
			uni.getStorage({
				key: "user-info",
				success: (res) => {
					if (res.data) {
						let result = JSON.parse(res.data);
						this.curUserInfo = result;
						this.userid = result['id'];
					}
				}
			});
			this.currentPage = 0;
			this.getHomeList();
		},
		methods: {
			// 点击左上角搜索
			openLeftSearch() {
				uni.navigateTo({
					url: "../search/search"
				});
			},
			// 点击右上角设置
			openMainSetting() {
				this.popupShow = true;
			},
			showModalDialog(item) {
				if (!store.state.hasLogin) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					return uni.navigateTo({
						url: '/pages/login/login'
					});
				}
				this.tarUserInfo = item;
				this.modalShow = true;
				/**
				let options = {
					title: "温馨提示", //标题 （可选）
					con: "余额不足咨询一分钟，请先充值！", //内容（可选）但是标题和内容至少选择一个
					okTitle: "去充值", //确认按钮文字（可选）
					cancleTitle: "取消", //取消按钮文字（可选）
					okTextColor: "#6BBBFF", //确认按钮颜色（可选）
					cancleTextColor: "#808080", //取消按钮颜色（可选）
					singer: false, //是否只显示确认按钮，默认false（可选
					textAlign: "center", //对齐方式 //left居左，center居中  ，right 居右 默认居中
					conColor: "#383838",
					bgColor: "#ffffff", //自定义弹框颜色
					titleColor: "#000000" //自定义title颜色

					//提示框内容颜色;
				}
				dialog.show(options, () => {

					//点击确认按钮的回调,

					uni.showToast({
						title: "点击了确定按钮"
					})

				}, () => {
					//点击取消按钮的回调
					uni.showToast({
						title: "点击了取消按钮"
					})
				})
			**/
			},
			closeModalAction() {
				this.modalShow = false;
			},
			// 切换选项卡
			changeTab(index) {
				// this.tabIndex = index
				if (index == 1) {
					uni.navigateTo({
						url: "../match-pair/match-pair"
					})
				}
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
				// console.log(this.cardCur)
				if (this.cardCur == this.swiperList.length - 2) {
					if (this.currentPage < 9) {
						this.currentPage++
					} else {
						this.currentPage = 0
					}
					this.getHomeList()
				}
			},
			// towerSwiper
			// 初始化towerSwiper
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				console.log(list)
				this.swiperList = list
			},

			// towerSwiper触摸开始
			TowerStart(e) {
				this.towerStart = e.touches[0].pageX
			},

			// towerSwiper计算方向
			TowerMove(e) {
				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},
			/**
			 * popup 状态发生变化触发
			 * @param {Object} e
			 */
			popupChange(e) {
				console.log(e);
				this.popupShow = e;
				if (!e) {
					uni.navigateTo({
						url: "../selection-lawyers/selection-lawyers"
					})
				}
			},
			getHomeList() {
				let data = {
					page: this.currentPage,
				};
				if (this.userid > 1) {
					data['user_id'] = this.userid;
				}
				console.log(data)
				this.$H.get('/user/list/getRecommendPersonnelList', data).then(res => {
					uni.stopPullDownRefresh();
					if (res.code == 101) {
						let refererList = res.referer;
						if (refererList.length < 10) {
							this.loadmore = false;
						} else {
							this.loadmore = true;
						}
						if (this.currentPage == 0) {
							this.swiperList = [...refererList];
							// console.log(this.swiperList)
						} else {
							this.swiperList = this.swiperList.concat(refererList)
							// console.log(this.swiperList.length)
						}
					} else {
						console.log(res.info);
					}
				})
			},
			openLawyerPage: function(detail) {
				console.log(detail);
				uni.navigateTo({
					// url: '../showflex/showflex'
					url: '../lawyer-homepage/lawyer-homepage?detailData=' + encodeURIComponent(JSON.stringify(detail))
				});
			},
			setTime: function(items) {
				var newItems = [];
				items.forEach(e => {
					newItems.push({
						author_name: e.author_name,
						cover: e.cover,
						id: e.id,
						post_id: e.post_id,
						published_at: dateUtils.format(e.published_at),
						title: e.title
					});
				});
				return newItems;
			},
		}
	}
</script>

<style>
	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
	}
</style>
